<template>
	<view class="content">
		<view class="filter">
			<view class="top">
				<image src="../../static/filter.svg" mode=""></image> <text>筛选</text>
			</view>
		</view>
		<view class="all_item">
			<view class="item">
				<view class="up_item">
					<text>文本</text>
					<text>标签</text>
					<button @click="open">打开弹窗</button>
				</view>
				<view class="divider" />

				<view class="down_item">
					<text>文本文本文本文本</text>
				</view>
			</view>
			<view class="item">
				<view class="up_item">
					<text>文本</text>
					<text>标签</text>
				</view>
				<view class="divider" />

				<view class="down_item">
					<text>文本文本文本文本</text>
				</view>
			</view>
			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
			</view>
		</view>

	</view>
</template>

<script>
	import Request from '../../util/request.js'
	export default {

		data() {
			return {
				title: 'Hello',
				type: ""
			}
		},
		onLoad() {
			this.getTest()
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('botton')
			},
			async getTest() {
				await uni.request({
					url: this.$BASE_URL + 'question',
					method: 'GET',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		.filter {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: flex-end;
			align-items: flex-start;

			background-color: #007AFF;
			border-radius: 0 0 20rpx 20rpx;

			.top {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				text {
					margin-right: 30rpx;
				}
			}

		}

		.all_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: -50rpx;

			.item {
				width: 700rpx;
				border-radius: 20rpx;
				background-color: white;
				box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.1);
				margin-bottom: 50rpx;

				.up_item {
					display: flex;
					justify-content: space-between;

					text {
						margin: 15rpx;

						&:first-child {
							font-weight: 900;
							font-size: 33rpx;
						}

						&:nth-child(2) {
							border: 1rpx solid rgb(7, 66, 7);
							padding: 3rpx 10rpx 3rpx 10rpx;
							box-sizing: border-box;
						}
					}


				}

				.divider {
					background: #E0E3DA;
					width: 100%;
					height: 5rpx;
				}

				.down_item {
					margin: 15rpx;
				}

			}
		}
	}
</style>
